<style type="text/css">
div#map-canvas {
	border: 1px solid black;
	position: relative;
	height: 380px;
	display: block;
	width: auto;
}
</style>

<div class="field-group box">
	<label for="coords">Coordinate geografiche (lat, lon)</label>
	<div class="field" id="coords" style="width: 100%">
		<input id="geo_lat" type="text" name="geo_lat" value="" style="width: 46%; display: block; float: left" />
		<input id="geo_lng" type="text" name="geo_lng" value="" style="width: 46%; display: block; float: right" />
	</div>
</div>

<div style="clear: both"></div>

<div class="field-group box">
	<label for="map-canvas">Sito</label>
	<div class="box plain">
		<div id="map-canvas"></div>
	</div>
</div>

<script type="text/javascript">
var map;
function initialize() {
	if (typeof google === 'undefined') { console.warn("Check internet connection"); return false; }
	var myLatlng = new google.maps.LatLng(start_lat, start_lng);
	var myOptions = {
		zoom: 15,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: false,
		panControl: false,
		rotateControl: false,
		scaleControl: false,
		streetViewControl: false,
		zoomControl: true,
		zoomControlOptions: {
			style: google.maps.ZoomControlStyle.SMALL, 
			position: google.maps.ControlPosition.TOP_RIGHT 
		}
	}
	updateFields(myLatlng);
  
	map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
	google.maps.event.addListener(map, 'click', function(e) {
		if (marker != false) {
			marker.setMap(null);
		}
		marker = new google.maps.Marker({
			position: e.latLng,
			map: map,
			title: "Coordinate del Sito",
			draggable: true
		});
		map.panTo(e.latLng);
		updateFields(e.latLng);
		google.maps.event.addListener(marker, 'mouseup', function(e2) {
			marker.getMap().panTo(e2.latLng);
			updateFields(e2.latLng);
		});
	});
}

function loadScript() {
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
	document.body.appendChild(script);
}

function updateFields(latLng) {
	$('#geo_lat').attr('value', latLng.lat());
	$('#geo_lng').attr('value', latLng.lng());
}

var marker = false;
var start_lat = 41.85477428307711;
var start_lng = 12.622824138641363;
$('document').ready(loadScript);
</script>

